{% extends "_layouts/examples.html" %}
{% block title %}Contextual menu / Default{% endblock %}

{% block standalone_css %}patterns_contextual-menu{% endblock %}

{% block content %}
<span class="p-contextual-menu--left">
  <button class="p-contextual-menu__toggle" aria-controls="menu-3" aria-expanded="false" aria-haspopup="true">Take action&hellip;</button>
  <span class="p-contextual-menu__dropdown" id="menu-3" aria-hidden="true">
    <span class="p-contextual-menu__group">
      <button class="p-contextual-menu__link">Commission</button>
      <button class="p-contextual-menu__link">Aquire</button>
      <button class="p-contextual-menu__link">Deploy</button>
    </span>
    <span class="p-contextual-menu__group">
      <button class="p-contextual-menu__link">Test hardware</button>
      <button class="p-contextual-menu__link">Rescue mode</button>
      <button class="p-contextual-menu__link">Mark broken</button>
    </span>
  </span>
</span>

<p>Lorem ipsum dolor sit amet consectetur adipiscing elit <span class="p-contextual-menu--left">
    <a href="#" class="p-contextual-menu__toggle" aria-controls="menu-4" aria-expanded="true" aria-haspopup="true">take action left</a>
    <span class="p-contextual-menu__dropdown" id="menu-4" aria-hidden="false">
        <span class="p-contextual-menu__group">
          <a href="#" class="p-contextual-menu__link">Commission</a>
          <a href="#" class="p-contextual-menu__link">Aquire</a>
          <a href="#" class="p-contextual-menu__link">Deploy</a>
        </span>
        <span class="p-contextual-menu__group">
          <a href="#" class="p-contextual-menu__link">Test hardware</a>
          <a href="#" class="p-contextual-menu__link">Rescue mode</a>
          <a href="#" class="p-contextual-menu__link">Mark broken</a>
        </span>
    </span>
</span> nunc dolor. Arcu molestie non arcu porttitor <span class="p-contextual-menu--center">
    <a href="#" class="p-contextual-menu__toggle" aria-controls="menu-5" aria-expanded="false" aria-haspopup="true">take action center</a>
    <span class="p-contextual-menu__dropdown" id="menu-5" aria-hidden="true">
        <span class="p-contextual-menu__group">
          <a href="#" class="p-contextual-menu__link">Commission</a>
          <a href="#" class="p-contextual-menu__link">Aquire</a>
          <a href="#" class="p-contextual-menu__link">Deploy</a>
        </span>
        <span class="p-contextual-menu__group">
          <a href="#" class="p-contextual-menu__link">Test hardware</a>
          <a href="#" class="p-contextual-menu__link">Rescue mode</a>
          <a href="#" class="p-contextual-menu__link">Mark broken</a>
        </span>
    </span>
</span> volutpat rutrum ipsum nunc lacus ligula ornare et diam <span class="p-contextual-menu">
    <a href="#" class="p-contextual-menu__toggle" aria-controls="menu-6" aria-expanded="false" aria-haspopup="true">take action right</a>
    <span class="p-contextual-menu__dropdown" id="menu-6" aria-hidden="true">
        <span class="p-contextual-menu__group">
          <a href="#" class="p-contextual-menu__link">Commission</a>
          <a href="#" class="p-contextual-menu__link">Aquire</a>
          <a href="#" class="p-contextual-menu__link">Deploy</a>
        </span>
        <span class="p-contextual-menu__group">
          <a href="#" class="p-contextual-menu__link">Test hardware</a>
          <a href="#" class="p-contextual-menu__link">Rescue mode</a>
          <a href="#" class="p-contextual-menu__link">Mark broken</a>
        </span>
    </span>
</span> vel eu.</p>

<script>
  {% include 'docs/examples/patterns/contextual-menu/_script.js' %}
</script>
{% endblock %}
